<template>
  <div id="login">
    <div class="denglu">
      <div class="title">金融市场风险管理系统</div>
      <div class="loginbox">
        <div class="accon one"><span class="icon"><img src="../../assets/image/u17.png" ></span><el-input v-model="account" placeholder="请输入账号"></el-input></div>
        <div class="accon two"><span class="icon"><img src="../../assets/image/u10.png" ></span><el-input v-model="passworld" @keyup.enter.native="gologin" placeholder="请输入密码" type="password"></el-input></div>
        <button class="gologin"  @click="gologin">登陆</button>
        
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      account: '',
      passworld: '',
    };
  },
  methods: {
    gologin () {
      if (!this.account || !this.passworld) {
         this.$message({message: '您输入的账号/密码有误，请重新输入',type: 'warning'});
      } else {
        this.verify();
      } 
    },
    verify() {
      this.axios.post('user/login', {jobNum: this.account,password: this.passworld})
        .then(({data}) => {
          if (data.code == 200) {
            if (sessionStorage.token) {
              sessionStorage.removeItem('token');
            }
            sessionStorage.setItem('token', data.data.token);
            if (sessionStorage.user) {
              sessionStorage.removeItem('user');
            }
            sessionStorage.setItem('user', JSON.stringify(data.data.user));
            this.$router.push ('/home');
          } else {
              this.$message({message: data.message,type: 'warning'});
          }
        })
        .catch(function (error) {
            console.log(error);
          });
    }
  }
};
</script>

<style lang="scss">
  #login {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url('../../assets/image/dl.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    .denglu {
      width: 492px;
      height: 406px;
      background-color: rgba(255,255,255,.8);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      .title {
        font-size: 36px;
        color: #0f66a9;
        text-align: center;
        line-height: 140px;
      }
      .loginbox {
        width: 380px;
        position: relative;
        transform: translate(60px,0);
      }
      .accon {
        display: flex;
        &.one {
          // margin-top: 0px;
          margin-bottom: 40px;
        }
        &.two {
          margin-bottom: 40px;
        }
        .icon {
          display: inline-block;
          width: 38px;
          height: 38px;
          padding: 8px;
          box-sizing: border-box;
          background-color: black;
          position: relative;
          transform: translateX(2px);
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
          z-index: 666;
          img {
            width: 100%;
          }
        }
        .el-input {
          width: 330px;
        }
      }
      .gologin {
        width: 370px;
        height: 40px;
        background-color: #0F66A9;
        font-size: 22px;
        color: white;
        line-height: 40px;
        text-align: center;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
</style>
